<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引入easyui的样式 -->
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css">
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">
<!-- js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
(function(){
	//更改底部工具栏 getPager返回页面对象
	var pager = $('#toolbar').datagrid('getPager');	
	  pager.pagination({
		pageList: [10,20,30],
	});
})	
//显示添加车辆信息框
function addcar(){
	$("#dlg").dialog("open").dialog('setTitle', '添加车辆信息');
	    $('#dlg').form('clear');	
	    $('#carupdate').hide();
	    $('#caradd').show();
	    $('#ccid').hide();
		$('#lab').hide();
}
//确认添加车辆信息
function caradd(){
//获得新增窗口内输入的文本框的值
var car = new Object();
car.cname = $("#cname").val(); 
car.cvolume = $("#cvolume").val();
car.csid = $("#cs").combobox('getValue');
var json = JSON.stringify(car);
//通过ajax请求将对应数据发送到后台中
$.ajax({
	type:"post",
	url:"${pageContext.request.contextPath}/car/car_addCarMsg.action",
	data:{"json":json},
	dataType:"text",
	success:function(data){
			$.messager.alert('提示','添加成功','info',function(){
				//刷新页面，关闭窗口，清除表单内容
				$("#CarList").datagrid('reload');
				$('#dlg').dialog('close');
				$('#dlg').form('clear');	
			});
		}
	})
};
//删除用户信息
function deletecar(){
	//获取被选中需要删除的数据
	 var data = $("#CarList").datagrid('getSelections');
	 if(data.length==0){
		 $.messager.show({
				title:'警告',
				msg:'请选中需要删除的数据',
				timeout:1000,
				showType:'slide',
			    style:{
						top:'100',						
					}
			});
	 }else{
	      //声明一个空的数组 装选中的uid
	      var cids = [];
	      for (var i = 0; i < data.length; i++) {
			cids.push(data[i].cid);
		}
	$.messager.confirm('确认对话框', '您确认删除选中的'+data.length+'条数据吗？', function(r){
	    		if (r){
	    		    //通过ajax请求将对应数据发送到后台中
	    		    $.ajax({
	    		    	type:"post",
	    		    	url:'${pageContext.request.contextPath}/car/car_deleteCarMsg.action',
	    		    	data:{"cids":cids},
	    		    	dataType:"text",
	    		    	success:function(data){
	    		    			//提示删除成功
	    		    			$.messager.alert('提示','删除成功','info',function(){
	    		    			$("#CarList").datagrid('reload');
	    		    			$("#CarList").datagrid('uncheckAll');
	    		    });
	    		}
	    		});
	         }
       });
    }
 }
//显示修改车辆信息框
function updatecar(){
	 var data = $("#CarList").datagrid('getSelections');	
		if(data.length==0){
			$.messager.show({
				title:'警告',
				msg:'请选中需要修改的数据',
				timeout:1500,
				showType:'slide',
					style:{
						left:100,
						right:'',
						top:100
					}
		  		});
		}else if(data.length!=1){
			$.messager.show({
				title:'警告',
				msg:'你只能选择一条数据修改',
				timeout:1500,
				showType:'slide',
					style:{
						left:100,
						right:'',
						top:100
					}
		  		});
		}else{
			var car =$("#CarList").datagrid('getSelected');
			$("#cid").textbox('setValue',car.cid)
			$("#cname").textbox('setValue',car.cname)
			$("#cvolume").textbox('setValue',car.cvolume);
			$("#cs").textbox('setValue',car.csname);
			$('#dlg').dialog('open').dialog('center').dialog('setTitle','修改车辆信息');
			//隐藏保存按钮
			$('#caradd').hide();
		    //隐藏id框
			$('#ccid').hide();
			//显示确认按钮
			$('#carupdate').show();	
			$('#lab').show();
		}
		
 }	
 //确认修改用户信息
 function carupdate(){
	 var car = new Object();
	 car.cid = $("#cid").val();
	 car.cname = $("#cname").val(); 
	 car.cvolume = $("#cvolume").val();
	 car.csid = $("#cs").combobox('getValue');
	 var json1 = JSON.stringify(car);
		$.ajax({	   				
				type:"post",
				url:"${pageContext.request.contextPath}/car/car_updateCarMsg.action",
				data:{"json1":json1},
				dataType:"text",
				success:function(data){
					$.messager.alert('提示','修改成功', data)
				  //刷新页面，关闭窗口，清除表单内容
					$("#CarList").datagrid('reload');
					$('#dlg').dialog('close');
					$('#dlg').form('clear');	
				}
		})
}
</script>
<body>
 <table id="CarList"  class="easyui-datagrid"
            toolbar="#toolbar" pagination="true" fit="true" 
            url="${pageContext.request.contextPath}/car/car_showCarMsg.action" striped="true"
            rownumbers="true" fitColumns="true" border="false">
        <thead>
            <tr>
                <th field="ck" checkbox=true></th>
                <th field="cid"  hidden="true" >车辆ID</th>
                <th field="cname" width='50' resizable='false' >车辆名字</th>
                <th field="cvolume" width='50' resizable='false'>车辆容量</th>
                <th field="csid"  hidden="true" >状态ID</th>
                <th field="csname" width='50' resizable='false'>车辆状态</th>
            </tr>
        </thead>
        <div id="toolbar">
        		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"  plain="true"  onclick="addcar()">增加</a>
        		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit"  plain="true"  onclick="updatecar()">修改</a>
        		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"  plain="true"  onclick="deletecar()">删除</a>
   		 </div>
   		   <div id="dlg" class="easyui-dialog" 
style="width:400px;height:280px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle" id="">车辆信息</div>
        <form id="fm" method="post" novalidate>
        <div class="fitem" id="carid"> 
          <div class="fitem" id="ccid">
                <label>车辆ID:</label>
                <input id="cid" name="cid" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>车辆名字:</label>
                <input id="cname" name="cname" class="easyui-textbox" required="true" >
            </div>
            <div class="fitem">
                <label>车辆容量:</label>
                <input id="cvolume" name="cvolume" class="easyui-textbox" required="true">
            </div>
             <div class="fitem">
                <label>车辆状态:</label>
                <input id="cs" class="easyui-combobox" name="cs"
    			data-options="editable:false,valueField:'id',textField:'text',url:'${pageContext.request.contextPath}/car/car_findCarCsnameMsg.action'" />        
            </div>
            <div class="fitem" id="lab">
                <label> 注：每次修改都需重新设置车辆状态</label>       
            </div>
           </div>
        </form>
    </div>
    <div id="dlg-buttons">
    	<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" 
style="width:90px" onclick="carupdate()" id="carupdate">确认修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" 
onclick="caradd()" style="width:90px" id="caradd" >确认添加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" 
onclick="javascript:$('#dlg').dialog('close')" id="et" style="width:90px">取消</a>
    </div>
   </table>
</body>
</html>